<template>
  <static-container class="user-notice">
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large"
          separator-class="el-icon-arrow-right">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeDetail">消息中心</el-breadcrumb-item>
            <el-breadcrumb-item :key="2" v-if="id">消息详情</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="right">
        <el-button
          v-if="!id"
          type="outline-info"
          size="medium"
          @click="doSave({action:'readAll'})"
        >全部已读</el-button>
        <el-button
          v-else
          type="outline-info"
          size="medium"
          @click="closeDetail"
        >返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <el-radio-group class="static-container__radio-group user-notice__radio-group" shadow v-model="activeTab" size="mini" v-if="!id">
        <el-radio-button label="platform-notice">
          平台公告
        </el-radio-button>
        <el-radio-button label="system-notice">
          系统消息
        </el-radio-button>
      </el-radio-group>

      <!--<transition-group-->
        <!--mode="out-in"-->
        <!--name="slide-fade"-->
      <!--&gt;-->
        <announcement-list key="announcement" :id="id" v-show="activeTab === 'platform-notice'" ref="announcement"></announcement-list>
        <system-notice-list key="system-notice" :id="id" v-show="activeTab === 'system-notice'"></system-notice-list>
      <!--</transition-group>-->

    </static-container-body>
  </static-container>
</template>

<script>
  import {tabs, grid} from '@/build';

  import AnnouncementList from "./announcement-list";
  import SystemNoticeList from "./system-notice-list";

  import {readAllApi} from '@/services/api/notice';

  export default {
    name: "user-notice",

    components: {SystemNoticeList, AnnouncementList},

    mixins: [tabs, grid],

    props: {
      tab: {
        default: 'platform-notice',
      },
      id: {}
    },

    data () {
      return {
        filters: {
          size: 8,
          page: 1,
        },
        tableData: {
          total: 0,
        },
      };
    },

    methods: {
      closeDetail() {
        this.$refs.announcement.closeDetail();
      },
    },

    mounted() {
      this.bindSave(readAllApi, 'readAll', 'form', {
        successMessage: '全部已读成功',
        afterSuccess: () => {
          this.$refs.announcement.refresh();
          this.$store.dispatch(types.OAUTH);
        },
      });
    }
  };
</script>

<style lang="scss">

  @include b(notice-card-list) {
    border-radius:8px;
    border:1px solid $--border-color-base-1;
  }
  @include b(user-notice) {
    padding: 20px;
    @include main-center(800px);

    @include e(radio-group) {
      margin-bottom: 30px;
      .el-radio-button__inner {
        width: 206px;
        height: 40px;
      }
    }
  }
</style>
